<template>
    <div class="container">
        <div ref="materTop" class="materTop">
            <dv-box class="dv" style="marginRight:20px" title='材料统计'>
                <div class="statistics">
                    <div class="statisticsDiv">
                        <div class="title">混凝土</div>
                            <Echart
                            id="electric1"
                            :options="waterOptions1"
                            >
                            </Echart>
                        </div>
                    <div class="statisticsDiv">
                        <div class="title">钢筋</div>
                            <Echart
                            id="electric1"
                            :options="waterOptions2"
                            >
                            </Echart>
                        </div>
                    <div class="statisticsDiv">
                        <div class="title">废料率</div>
                            <Echart
                            id="electric1"
                            :options="waterOptions3"
                            >
                            </Echart>
                        </div>
                </div>
            </dv-box>
            <dv-box class="dv" title='材料进场情况'>
                <Echart id="mTop" :options="option"  ref="chartsT" />
            </dv-box>
        </div>
        <div ref="materBottom" class="materBottom">
            <dv-box class="dv" title='材料采购台账'>
                <dv-scroll-board :config="tableConfig" :style="{width:'100%',height:'100%'}" />
            </dv-box>
        </div>
    </div>
</template>

<script>
import dvBox from "@/components/datav/dv-box.vue";
export default {
    data(){
        return{
            statisticsData:[
                {label:'混凝土',value:'0',unit:'m³'},
                {label:'钢筋',value:'0',unit:'t'},
                {label:'废料率',value:'0',unit:'%'},
            ],
            option:{},
            materialsStatistic:{
                gj:[],
                sn:[],
                snDate:[],
            },
            // 表格配置
            tableConfig: {},

            // echarts
            waterOptions1:{},
            waterOptions2:{},
            waterOptions3:{},
        }
    },
    props:{
        id:{
            type:Number|String,
            default:''
        },
    },
    components:{dvBox},
    mounted(){
        this.getQueryMonthlyStatistic()
        this.getQueryDailyStatistic()
        this.getQueryReceivingRecordsPageData()
    },
    methods:{
        // 获取当月采购统计
        getQueryMonthlyStatistic(){
            this.$datav.getQueryMonthlyStatistic({projectId:this.id}).then(res => {
                this.statisticsData[0].value = res.data.monthlyConcreteData.toFixed(2)
                this.statisticsData[1].value = res.data.monthlySteelData.toFixed(2)
                this.statisticsData[2].value = res.data.monthlyScrapRate.toFixed(2)
                this.init2()
            })
        },
        // 进场统计
        getQueryDailyStatistic(){
            // 	0:水泥
            this.$datav.getQueryDailyStatistic({projectId:this.id, days:7, type:0}).then(res => {
                res.data.map(item => {
                    this.materialsStatistic.sn.push(item.total)
                    this.materialsStatistic.snDate.push(item.date)
                })
            })
            // 	1:钢筋
            this.$datav.getQueryDailyStatistic({projectId:this.id, days:7, type:1}).then(res => {
                res.data.map(item => {
                    this.materialsStatistic.gj.push(item.total)
                })
            })
            this.init1()
        },
        // 台账数据
        getQueryReceivingRecordsPageData(){
            this.$datav.getQueryReceivingRecordsPage({deptId:this.id, timeStart:"", timeEnd: "", current: 1, size: 30, type:''}).then(res => {
                let arr = []
                res.data.records.map(item => {
                    arr.push(
                        [item.title,item.num,item.creatorName,item.supplierName,item.estimateData,item.planData,item.actualData,item.deliveryData,item.offset1,item.receivedTime]
                    )
                })
                this.tableConfig = {
                    header: ['计划名称', '计划编号', '发起人','供应商', '图纸设计重量(t)', '计划使用重量(t)','实际使用重量(t)', '送货量(t)', '量差(t)', '收货时间'],
                    index: true,
                    rowNum:6,
                    headerHeight:40,
                    columnWidth:[80,150,150,130,200,200,200,200,200,200,200],
                    headerBGC:'#F2F3F5',
                    oddRowBGC:'rgb(255, 255, 255,0)',
                    evenRowBGC:'rgb(255, 255, 255,0)',
                    // headerBGC:'rgba(2, 49, 100, .2)',
                    // oddRowBGC:'rgba(0,59,81,.2)',
                    // evenRowBGC:'rgba(10,39,50,.2)',
                    data:arr
                }
            })
        },
         transformFontSize(fontsize,bool) {
             // 获取屏幕宽度
            const width = parseInt(document.getElementById('app').clientWidth)
            const ratio = width / 1920
            // 取下整
            console.log(parseInt(fontsize * ratio),fontsize)
            return bool ?  parseInt(fontsize * ratio) -10 : parseInt(fontsize * ratio)
        },
        init1(){
            this.option={
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                    type: 'shadow'
                    }
                },
                color:[
                    {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            { offset: 0, color: '#159AFF' }, // 设置颜色渐变
                            { offset: 1, color: 'rgba(0,58,255,0)' }
                        ]
                    },
                    {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            { offset: 0, color: '#D0DEEE' }, // 设置颜色渐变
                            { offset: 1, color: 'rgba(208,222,238,0)' }
                        ]
                    }
               ],
                legend: {
                    textStyle:{
                        color:'#000'
                        // color:'#fff'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: this.materialsStatistic.snDate,
                    axisLabel:{
                        color:'#000',
                        // color:'#D0DEEE'
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel:{
                        color:'#000',
                        // color:'#D0DEEE'
                    }
                },
                series: [
                    {
                    name: '混凝土',
                    type: 'bar',
                    data: this.materialsStatistic.sn
                    },
                    {
                    name: '钢筋',
                    type: 'bar',
                    data: this.materialsStatistic.gj
                    }
                ]
            }
        },
        init2(){
            this.waterOptions1 = {
                    title: {
                    text: '本月采购混凝土',
                    subtext: Math.round(this.statisticsData[0].value) + this.statisticsData[0].unit,
                    // left: 'center',
                    // position: 'center',
                    // top: '30%',
                    left: '48%',
                    top: '30%',
                    x: 'center',
                    y: 'center',
                    textAlign:'center',
                    itemGap: 30,
                    textStyle: {
                        color: 'rgba(255, 255, 255, 1)',
                        fontSize:this.transformFontSize(15) ,
                        // lineHeight: 23
                    },
                    subtextStyle: {
                        color: 'rgba(255, 255, 255, 1)',
                        fontSize: this.transformFontSize(44,true),
                        // lineHeight: 26,
                        fontWeight: 'bold',
                        fontFamily: 'YouSheBiaoTiHei'
                    }
                    },
                    series: [
                    {
                        type: "pie",
                        center: ['50%', '50%'],
                        radius: "80%",
                        animation: false,
                        hoverAnimation: false,
                        label: {
                        show: false,
                        },
                        labelLine: {
                        show: false,
                        },
                        itemStyle: {
                        normal: {
                            color: {
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                offset: 0,
                                color: 'rgba(62, 155, 255, 1)'
                                },
                                {
                                offset: 1,
                                color: 'rgba(26, 92, 243, 1)'
                                }
                            ]},
                            borderColor: "rgba(149, 222, 200, 1)",
                            borderWidth: 2,
                        },
                        },
                        data: [100],
                    },
                    ]
            }
            this.waterOptions2={
                title: {
                    text: '本月采购钢筋',
                    subtext: Math.round(this.statisticsData[1].value) + this.statisticsData[1].unit,
                    left: 'center',
                    top: '30%',
                    itemGap: 30,
                    textStyle: {
                    color:'#fff',
                    fontSize: this.transformFontSize(15),
                    // lineHeight: 23
                    },
                    subtextStyle: {
                    color:'#fff',
                    fontSize: this.transformFontSize(44,true) ,
                    // lineHeight: 26,
                    fontWeight: 'bold',
                    fontFamily: 'YouSheBiaoTiHei'
                    }
                },
                series: [
                    {
                        type: "pie",
                        center: ['50%', '50%'],
                        radius: "80%",
                        animation: false,
                        hoverAnimation: false,
                        label: {
                        show: false,
                        },
                        labelLine: {
                        show: false,
                        },
                        itemStyle: {
                        normal: {
                            color: {
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                offset: 0,
                                color: 'rgba(254, 158, 32, 1)'
                                },
                                {
                                offset: 1,
                                color: 'rgba(222, 134, 18, 1)'
                                }
                            ]},
                            borderColor: "rgba(254, 194, 5, 0.5)",
                            borderWidth: 2,
                        },
                        },
                        data: [100],
                    },
                    ]
            }
            this.waterOptions3= {
                title: {
                text: this.statisticsData[2].value+this.statisticsData[2].unit,
                subtext: '本月废料率',
                left: 'center',
                top: '40%',
                itemGap: 5,
                textStyle: {
                    color: '#000',
                    // color: '#FFFFFF',
                    fontSize: this.transformFontSize(30),
                    // lineHeight: 24
                },
                subtextStyle: {
                    color: '#000',
                    // color: '#FFFFFF',
                    fontSize: this.transformFontSize(13),
                    // lineHeight: 12,
                    fontWeight: 'bold',
                    fontFamily: 'YouSheBiaoTiHei'
                }
                },
                legend: {
                show: false,
                bottom: 0
                },
                series: [
                {
                    type: 'pie',
                    center: ['50%', '50%'],
                    radius: ['68%', '80%'],
                    animation: false,
                    hoverAnimation: false,
                    itemStyle: {
                    borderWidth: 5,
                    borderColor: 'rgba(245,250,270,1)'
                    },
                    label: {
                    show: false
                    },
                    color: [
                    'rgba(61, 242, 183, 1)',
                    'rgba(0, 130, 255, 1)',
                    'rgba(102, 225, 223, 1)'
                    ],
                    data: [
                    {
                        name: '办公区',
                        value: 20
                    },
                    {
                        name: '施工区',
                        value: 30
                    },
                    {
                        name: '生活区',
                        value: 40
                    }
                    ]
                },
                  {
                    type: "pie",
                    center: ['50%', '50%'],
                    radius: "62%",
                    animation: false,
                    hoverAnimation: false,
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                    itemStyle: {
                      color: 'rgba(3, 116, 254, 0.1)'
                    },
                    data: [100],
                  },
                ]
            }
        }
    }
}
</script>

<style lang='scss' scoped>
p{
    margin: 0;
}
.container{
    width: 100%;
    height: 100%;
    .materTop{
        width: 100%;
        height: calc(50% - 24px);
        min-height: 376px;
        display: flex;
        justify-content: space-around;
        margin-bottom: 24px;
        box-sizing: border-box;
    }
    .materBottom{
        height:50%;
        width: 100%;
        min-height: 360px;
    }
    .dv{
        width: 50%;
        height: 100%;
    }
    .statistics{
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .statisticsDiv{
            position: relative;
            width: 240px;
            height: 100%;
            border-radius: 100%;
            display: flex;
            flex-direction: column;
            // color: #fff;
            @include font_color($font-color-theme1);
            padding: 20px 0;
            .title{
                width: 119px;
                height: 35px;
                font-size: 13px;
                line-height: 31px;
                border-radius: 15px 0px 0px 0px;
                border: 2px solid rgba(0, 130, 255, 0.6);
                //border-image: linear-gradient(133deg, rgba(0, 130, 255, 1), rgba(217, 231, 255, 0)) 2 2;
                padding-left: 14px;
                font-size: 18px;
                // color: #D9E7FF;
                @include font_color($font-color-theme1);
                margin-bottom: 30px;
            }
        }
    }
}
@include dvScroll
</style>